<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" > 

<html>
<head>
<base href="<%=basePath%>">
<title>药品列表</title>
<link rel="stylesheet" type="text/css" href="./js/bootstrap-3.3.5-dist/css/bootstrap.css" />
<link href="./js/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="./css/sb-admin/sb-admin-2.css" rel="stylesheet">
<link rel="stylesheet" href="./js/font-awesome/css/font-awesome.min.css">
<link href="./css/base.css" rel="stylesheet">
<link rel="stylesheet" href="./js/bootstrap-table/bootstrap-table.min.css">
<link rel="stylesheet" href="./js/bootstrap-multiselect/bootstrap-multiselect.css"/>
<link rel="stylesheet" href="./js/bootstrap-3.3.5-dist/css/bootstrap-datetimepicker.css">
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/bootstrap-3.3.5-dist/js/bootstrap.js"></script>
<script src="./js/bootstrap-table/bootstrap-table-all.js"></script>
<script src="./js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="./js/metisMenu/metisMenu.js"></script>
<script src="./js/bootstrap-multiselect/bootstrap-multiselect.js"></script>
<script src="./js/bootstrap-3.3.5-dist/js/bootstrap-datetimepicker.js"></script>
<script src="./js/bootstrap-3.3.5-dist/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="./js/bootstrap-jquery-plugin/jquery.bootstrap.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script type="text/javascript" src="./js/xss.js"></script>
<script src="./js/ajaxfileupload.js"></script>
<style type="text/css">
.fileinput-button {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.fileinput-button input{
    position:absolute;
    right: 0px;
    top: 0px;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    font-size: 200px;
}
.btn-upload{
    border: 1px solid #efefef;
    border-radius: 6px;
    padding: 8px;
    color: #fff;
    background-color: #04be02;
}
</style>
</head>
<body>
<jsp:include page="../template/head.jsp" />
<jsp:include page="../template/leftnav.jsp" />
<div id="page-wrapper">
	<div>
		<h1>药品列表</h1>
	</div>
	<div class="content">
		<form class="form-inline">
			<div class="form-group">
				<label for="slevelOneSubject">药品名称：</label>
				<input type="text" id="medicineName" class="form-control" placeholder="请输入药品名称" onkeyup="filters(this)" onchange="filters(this)">
			</div>
			
			<div class="form-group">
				<button class="btn  search-btn" id="search">搜索</button>
				<button id="create" class="btn">新增</button>
				<button id="reset" class="btn btn-default">重置</button>
				<label for="slevelOneSubject">导入：</label>
				<span class="btn fileinput-button btn-upload" >
		            <span>选择</span>
		            <input type="file" id="file1" name="file" />
		        </span>
		        <span class="btn fileinput-button btn-upload">
		            <span>上传</span>
		            <input type="button" value="上传" id="up"/>
		        </span>
			</div>
			<div align="center">

		    </div>
		</form>
		 <table id="table" data-toolbar="#toolbar" data-toggle="table" data-row-style="rowStyle" data-classes="table  table-no-bordered"
	           data-minimum-count-columns="2"  data-cache="false" data-pagination="true"  data-striped="data-striped"
	           data-page-list="[5, 10, 20, 50]"  data-query-params="tableQueryParams" style="word-break:break-all;"
	           data-side-pagination="server" data-page-size=10 data-url="./medicine/getMedicine"
	           data-detail-view="true"
			   data-detail-formatter="detailFormatter">
	           <thead>
				<tr class="headTr">
					<th data-field="name" data-width="30%" >名称</th>
					<!-- <th data-field="details" data-width ="30%" data-formatter="detailsFormatter">概述</th> -->
					<th data-field="skinTest" data-width ="20%" data-formatter="skinTestFormatter">皮试</th>
					<th data-field="createdTime" data-width ="30%" data-formatter="dateFormatter">创建时间</th>
					<th data-field="operation" data-width ="20%" data-formatter="operFormatter">操作</th>
				</tr>
			</thead>
	    </table>
	    <div id="medicalTemp" style="display:none">
			<ul class="list-inline">
				<li role="presentation"><a role="button" class="btn btn-primary">编辑</a></li>
				<li role="presentation"><a role="button" class="btn btn-danger">删除</a></li>
			</ul>
		</div>
    </div>
</div>
<div id="createwrap" style="display:none">
  <form id="createform" role="form" class="form-horizontal">
    <div class="form-group">
    	<label for="illness" class="col-sm-3 control-label">药品名称:</label>
    	<div class="col-sm-8">
      		<input class="form-control" id="name" placeholder="请输入药品名称" onkeyup="filters(this)" onchange="filters(this)"/>
    	</div>
    	<br>
    	<br>
    	
    	<label for="details" class="col-sm-3 control-label">药品说明:</label>
    	<div class="col-sm-8" style="margin-top:5px">
      		<textarea class="form-control" id="details" placeholder="请输入药品说明"></textarea>
    	</div>
    	<br>
    	<br>
    	
<!--    	 	<label for="levelOneSubject" class="col-sm-3 control-label">药品性状:</label>
    	<div class="col-sm-8" style="margin-top:5px">
      		<textarea class="form-control" id="traits" placeholder="请输入药品性状" onkeyup="filters(this)" onchange="filters(this)"></textarea>
    	</div>
    	<br>
    	<br>
    	
    	<label for="levelTwoSubject" class="col-sm-3 control-label">作用类别:</label>
    	<div class="col-sm-8" style="margin-top:5px">
      		<textarea class="form-control" id="effectType" placeholder="请输入作用类别" onkeyup="filters(this)" onchange="filters(this)"></textarea>
    	</div>
    	<br>
    	<br>
    	
    	<label for="parts" class="col-sm-3 control-label">适应症:</label>
        <div class="col-sm-8" style="margin-top:5px">
            <textarea class="form-control" id="indications" placeholder="请输入药品适应症" onkeyup="filters(this)" onchange="filters(this)"></textarea>
        </div>
        <br>
    	<br>
    	
      	<label for="symptoms" class="col-sm-3 control-label">药品规格:</label>
      	<div class="col-sm-8" style="margin-top:5px">
      		<textarea class="form-control" id="specification" placeholder="请输入药品规格" onkeyup="filters(this)" onchange="filters(this)"></textarea>
      	</div>
        <br>
    	<br>
    	
    	<label for="duration" class="col-sm-3 control-label">用法用量:</label>
      	<div class="col-sm-8" style="margin-top:5px">
      		<textarea class="form-control" id="dosage" placeholder="请输入药品用法用量" onkeyup="filters(this)" onchange="filters(this)"></textarea>
      	</div>
        <br>
    	<br>
    	
    	<label for="examNames" class="col-sm-3 control-label">不良反应:</label>
      	<div class="col-sm-8" style="margin-top:5px">
      		<textarea class="form-control" id="adverseReactions" placeholder="请输入药品不良反应" onkeyup="filters(this)" onchange="filters(this)"></textarea>
      	</div>
        <br>
    	<br>
    	
    	
        <label for="specialCrowd" class="col-sm-3 control-label" >药品禁忌:</label>
        <div class="col-sm-8" style="margin-top:5px">
            <textarea class="form-control" id="taboo" placeholder="请输入药品禁忌" onkeyup="filters(this)" onchange="filters(this)"></textarea>
        </div>
        <br>
    	<br>
        
        <label for="pathogen" class="col-sm-3 control-label">注意事项:</label>
      	<div class="col-sm-8" style="margin-top:5px">
      		<textarea class="form-control" id="precautions" placeholder="请输入药品注意事项" onkeyup="filters(this)" onchange="filters(this)"></textarea>
      	</div>
        <br>
    	<br>
    	
    	<label for="scheme" class="col-sm-3 control-label">推荐价格:</label>
      	<div class="col-sm-8" style="margin-top:5px">
      		<textarea class="form-control" id="price" placeholder="请输入药品推荐价格" onkeyup="filters(this)" onchange="filters(this)"></textarea>
      	</div>
        <br>
    	<br> -->
        
    </div>
</div>    	
<script>

$(function () {
	
	"use strict";

	$('#search').on('click', function (e) {
		e.preventDefault();
		searchOrder();
	});
	
	$('#create').on('click', function (e) {
		e.preventDefault();
		createMedicine();
	});
	
	$("#up").click(function () {
        ajaxFileUpload();
    })
	
});

function tableQueryParams(params) {
	var queryObj = getQueryObject();
	var newParams = $.extend(params,queryObj);
	return newParams;
}
	
function getQueryObject(){
	var queryObj;
	var name = $("#medicineName").val();
	
	var queryObj = {
			isSearch: true,
			name : name
		}
	
	if(name ==""){
		delete queryObj.name;
	}
	
	return queryObj;
}
	
function searchOrder(){
	var queryObj = getQueryObject();
	$('#table').bootstrapTable('refresh', {
		query : {
			offset: 0
		},
		url : "./medicine/getMedicine",
		silent : true
	});
}


function operFormatter(value, row) {
	var operTemp = $("#medicalTemp").clone();
	var lis = operTemp.find("ul li");
	lis.eq(0).find("a").attr("href", "./jsp/illness/medicinedetails.jsp?id="+row.id);
	lis.eq(1).find("a").attr("onClick", "deleteMedicine(\""+row.id+"\",\""+row.name+"\")");
	return operTemp.html();
}

function deleteMedicine(id,name){
	$.messager.model = { 
		//定义消息提示框
	   	ok:{ text: "确定", classed: 'btn-success' },
	    cancel:{text:"取消",classed: 'btn-danger' }
	};
	$.messager.confirm("确认操作", "确定删除药品：'"+name+ "'?", function() {
		$.ajax({
			url : "./medicine/deleteMedicine",
			type : 'POST',
			data : {
				id :id
			},
			dataType : 'json',
			success : function(ret) {
                 if(ret.resultCode == 0){
                     $.messager.popup("操作成功");
                     $('#table').bootstrapTable('refresh', {
						query : {
							offset: 0
						},
						silent : true
					});
                 }else{
                     $.messager.popup("操作失败");
                 }
			}
		});
	});
}

/* function createMedicine(){
	$("#createwrap").show();
	$("#createwrap").dialog({
         	title   : "新增药品记录",
        	'class' :  "mydialog",
        	onClose : function() { 
         		$(this).dialog("close");
         		$("#name").val('');
           		$("#ingredient").val('');
           		$("#traits").val('');
           		$("#effectType").val('');
           		$("#indications").val('');
           		$("#specification").val('');
           		$("#dosage").val('');
           		$("#adverseReactions").val('');
           		$("#taboo").val('');
           		$("#precautions").val('');
           		$("#price").val('');
          	}, 
          	buttons : [{
          		text : "提交",
          		'class' : "btn btn-primary",
             	click : function() {
             		var name = $("#name").val();
             		var ingredient = $("#ingredient").val();
             		var traits = $("#traits").val();
             		var effectType = $("#effectType").val();
             		var indications = $("#indications").val();
             		var specification = $("#specification").val();
             		var dosage = $("#dosage").val();
             		var adverseReactions = $("#adverseReactions").val();
             		var taboo = $("#taboo").val();
             		var precautions = $("#precautions").val();
             		var price = $("#price").val();
             		
                    $.ajax({
                     url: "./medicine/add",
                     data: {
                         name: name,
                         ingredient: ingredient,
                         traits : traits,
                         effectType :effectType,
                         indications : indications,
                         specification : specification,
                         dosage :dosage,
                         adverseReactions: adverseReactions,
                         taboo :taboo,
                         precautions: precautions,
                         price : price
                     },
                     type: "POST",
                     dataType: 'json',
                     cache: false,
                     traditional: true,
                     success: function (ret) {
                         if (ret.resultCode == 0) {
                             $.messager.popup("温馨提示:新增成功!");
                             $('#table').bootstrapTable('refresh', {
								query : {
									offset: 0
								},
								silent : true
							});
                            
                         }else{
                         	$.messager.popup("温馨提示:新增失败!");
                         }
                         $(this).dialog("close");
                     }
                 });
                 $(this).dialog("close");
	                 $("#name").val('');
	           		$("#ingredient").val('');
	           		$("#traits").val('');
	           		$("#effectType").val('');
	           		$("#indications").val('');
	           		$("#specification").val('');
	           		$("#dosage").val('');
	           		$("#adverseReactions").val('');
	           		$("#taboo").val('');
	           		$("#precautions").val('');
	           		$("#price").val('');
             	}
             },{
             text : "关闭",
             'class' : "btn btn-default",
             click : function() {
                	$(this).dialog("close");
                	$("#name").val('');
	           		$("#ingredient").val('');
	           		$("#traits").val('');
	           		$("#effectType").val('');
	           		$("#indications").val('');
	           		$("#specification").val('');
	           		$("#dosage").val('');
	           		$("#adverseReactions").val('');
	           		$("#taboo").val('');
	           		$("#precautions").val('');
	           		$("#price").val('');
             	}
         }]
     });
} */

function createMedicine(){
	$("#createwrap").show();
	$("#createwrap").dialog({
         	title   : "新增药品记录",
        	'class' :  "mydialog",
        	onClose : function() { 
         		$(this).dialog("close");
         		$("#name").val('');
           		$("#details").val('');
          	}, 
          	buttons : [{
          		text : "提交",
          		'class' : "btn btn-primary",
             	click : function() {
             		var name = $("#name").val();
             		var details = $("#details").val();
             		
                    $.ajax({
                     url: "./medicine/createMedicine",
                     data: {
                         name: name,
                         details: details
                     },
                     type: "POST",
                     dataType: 'json',
                     cache: false,
                     traditional: true,
                     success: function (ret) {
                         if (ret.resultCode == 0) {
                             $.messager.popup("温馨提示:新增成功!");
                             $('#table').bootstrapTable('refresh', {
								query : {
									offset: 0
								},
								silent : true
							});
                            
                         }else{
                         	$.messager.popup("温馨提示:新增失败!");
                         }
                         $(this).dialog("close");
                     }
                 });
                 $(this).dialog("close");
	                 $("#name").val('');
	           		$("#details").val('');
             	}
             },{
             text : "关闭",
             'class' : "btn btn-default",
             click : function() {
                	$(this).dialog("close");
                	$("#name").val('');
	           		$("#details").val('');
             	}
         }]
     });
}

function detailFormatter(index, row) {
	var html=[];
	html.push('<div style="padding:10;">');
	html.push('<div class="bs-callout bs-callout-info">');
	html.push('<p><b>用法:</b></br>' + row.medicineUsage + '</p>');
	html.push('<p><b>禁忌症:</b></br>' + dealTaboo(row.medicalTaboos) + '</p>');
	html.push('<p><b>副作用:</b></br>' + row.sideEffect + '</p>');
	html.push('<p><b>概述:</b></br>' + row.details + '</p>');
	html.push('<p><b>用量:</b></br>' + dealDetails(row.medicalDBDetails) + '</p>');
	html.push('</div>');
	html.push('</div>');
	return html.join('');
}

function dealTaboo(medicalTaboos){
	var str = '';
	for(var i=0;i<medicalTaboos.length;i++){
		str = str + medicalTaboos[i].taboo + '<br>';
	}
	return str==''?null:str;
}

function dealDetails(medicalDBDetails){
	
	for(var i=0;i<medicalDBDetails.length;i++){
		
	}
	return null;
}

function dateFormatter(value, row){
	if(value!=null){
		return getSmpFormatDateByLong(value, true);
	}else{
		return '-';
	}
}

function ajaxFileUpload(){
    $.ajaxFileUpload({
            url: "./medicine/importExcelMedicine",
            secureuri: false, 
            fileElementId: 'file1', 
            dataType: 'json', 
            success: function (data, status){
				$.messager.popup(data.msg);
				$('#table').bootstrapTable('refresh', {
					query : {
						offset: 0
					},
					url : "./medicine/getMedicine",
					silent : true
				});
            },
            error: function (data, status, e){
                alert(e);
            }
        }
    )
    return false;
}

function skinTestFormatter(value, row){
	if(value==1){
		return "需要";
	}else{
		return "不需要";
	}
}
</script>
</body>
</html>